<template>
  <el-card class="activity-stats-card" shadow="hover">
    <template #header>
      <h3>平台活跃度统计</h3>
    </template>
    <div class="activity-content">
      <div class="activity-item">
        <div class="activity-label">日活跃用户 (DAU)</div>
        <div class="activity-value">{{ data?.dailyActiveUsers || 0 }}</div>
        <div
          class="activity-growth"
          :class="getGrowthClass(data?.dauGrowthRate)"
        >
          <IconifyIconOffline
            :icon="getGrowthIcon(data?.dauGrowthRate)"
            class="growth-icon"
          />
          <span>{{ formatGrowthRate(data?.dauGrowthRate) }}</span>
        </div>
      </div>

      <div class="activity-item">
        <div class="activity-label">周活跃用户 (WAU)</div>
        <div class="activity-value">{{ data?.weeklyActiveUsers || 0 }}</div>
        <div
          class="activity-growth"
          :class="getGrowthClass(data?.wauGrowthRate)"
        >
          <IconifyIconOffline
            :icon="getGrowthIcon(data?.wauGrowthRate)"
            class="growth-icon"
          />
          <span>{{ formatGrowthRate(data?.wauGrowthRate) }}</span>
        </div>
      </div>

      <div class="activity-item">
        <div class="activity-label">月活跃用户 (MAU)</div>
        <div class="activity-value">{{ data?.monthlyActiveUsers || 0 }}</div>
        <div
          class="activity-growth"
          :class="getGrowthClass(data?.mauGrowthRate)"
        >
          <IconifyIconOffline
            :icon="getGrowthIcon(data?.mauGrowthRate)"
            class="growth-icon"
          />
          <span>{{ formatGrowthRate(data?.mauGrowthRate) }}</span>
        </div>
      </div>
    </div>

    <div class="activity-comparison">
      <div class="comparison-item">
        <span class="comparison-label">昨日活跃:</span>
        <span class="comparison-value">{{
          data?.yesterdayActiveUsers || 0
        }}</span>
      </div>
      <div class="comparison-item">
        <span class="comparison-label">上周活跃:</span>
        <span class="comparison-value">{{
          data?.lastWeekActiveUsers || 0
        }}</span>
      </div>
      <div class="comparison-item">
        <span class="comparison-label">上月活跃:</span>
        <span class="comparison-value">{{
          data?.lastMonthActiveUsers || 0
        }}</span>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { IconifyIconOffline } from "@/components/ReIcon";
import type { ActivityStats } from "@/api/dashboard";

interface Props {
  /** 活跃度统计数据 */
  data: ActivityStats | null;
}

defineProps<Props>();

// 获取增长率样式类
const getGrowthClass = (rate?: number) => {
  if (!rate) return "growth-neutral";
  if (rate > 0) return "growth-positive";
  if (rate < 0) return "growth-negative";
  return "growth-neutral";
};

// 获取增长率图标
const getGrowthIcon = (rate?: number) => {
  if (!rate) return "ep:minus";
  if (rate > 0) return "ep:arrow-up";
  if (rate < 0) return "ep:arrow-down";
  return "ep:minus";
};

// 格式化增长率
const formatGrowthRate = (rate?: number) => {
  if (!rate) return "0.00%";
  const absRate = Math.abs(rate);
  const sign = rate > 0 ? "+" : rate < 0 ? "-" : "";
  return `${sign}${absRate.toFixed(2)}%`;
};
</script>

<style scoped>
/* 响应式设计 */
@media (width <= 768px) {
  .activity-content {
    gap: 16px;
  }

  .activity-item {
    padding: 12px;
  }

  .activity-value {
    font-size: 28px;
  }

  .activity-comparison {
    flex-direction: column;
    gap: 12px;
  }

  .comparison-item {
    flex-direction: row;
    justify-content: space-between;
  }
}

@media (width >= 1200px) {
  .activity-content {
    flex-direction: row;
    justify-content: space-around;
  }

  .activity-item {
    flex: 1;
    margin: 0 8px;
  }
}

.activity-stats-card {
  min-height: 300px;
  border-radius: 12px;
}

.activity-stats-card :deep(.el-card__header) {
  padding: 20px 20px 0;
}

.activity-stats-card :deep(.el-card__header h3) {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.activity-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px 0;
}

.activity-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.activity-item:hover {
  background: #e9ecef;
  transform: translateY(-2px);
}

.activity-label {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #666;
}

.activity-value {
  margin-bottom: 8px;
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
  color: #333;
}

.activity-growth {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
}

.growth-icon {
  margin-right: 4px;
  font-size: 14px;
}

.growth-positive {
  color: #67c23a;
}

.growth-negative {
  color: #f56c6c;
}

.growth-neutral {
  color: #909399;
}

.activity-comparison {
  display: flex;
  justify-content: space-around;
  padding: 16px 0 0;
  margin-top: 16px;
  border-top: 1px solid #ebeef5;
}

.comparison-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.comparison-label {
  font-size: 12px;
  color: #909399;
}

.comparison-value {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}
</style>
